<template>
    <transition name="fade">
    <div class="container">
        <div class="header">
            <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
            <a class="center">编辑个人信息</a>
        </div>
        <div class="m-box ft-addon"  v-on:click="showAvatarPop"  style="height: 70px;margin-top: 60px;">
            <div class="label">
                <img class="avatar" src="../../assets/avatar.jpg">
            </div>
        </div>
        <div class="m-box ft-addon" v-on:click="showNicknamePop">
            <div class="label">显示昵称</div>
            <div class="content">{{user_info.nickname}}</div>
        </div>
        <div class="m-box ft-addon" v-on:click="chooseSex">
            <div class="label">性别</div>
            <div class="content">{{user_info.sex}}</div>
        </div>
        <div class="m-box ft-addon" v-on:click="showEmailPop">
            <div class="label">电子邮箱</div>
            <div class="content">{{user_info.email}}</div>
        </div>
        <div class="m-box ft-addon" v-on:click="showMobilePop">
            <div class="label">绑定手机</div>
            <div class="content">{{user_info.mobile}}</div>
        </div>
        <a class="m-box ft-addon" href="#/address">
            <div class="label">收货地址</div>
        </a>
        <div class="m-box ft-addon"  v-on:click="showPwdPop">
            <div class="label text-red">修改密码</div>
        </div>
        <picker  v-model="show" :data-items="sexItems" @change="onSexChange">
            <div class="top-content" slot="top-content"><a class="pull-left" v-on:click="closeSex">关闭</a> <a class="pull-right" v-on:click="confirmSex">确定</a></div>
        </picker>
        <m-pop ref="avatar_pop">
            <div class="form-panel">
                <div class="header-ctrl">
                    <a class="pull-left" v-on:click="cancelAvatar">取消</a>
                    <a class="center">更改头像</a>
                    <a class="pull-right" v-on:click="confirmAvatar">确定</a>
                </div>
                <div class="avatar-picker">
                    <img src="../../assets/avatar.jpg" v-on:click="showChangeAvatarPop">
                </div>
                <m-pop ref="change_avatar_pop">
                    <div class="bottom-list">
                        <a class="item">选择图片</a>
                        <a class="item text-red" v-on:click="cancelChangeAvatarPop">取消</a>
                    </div>
                </m-pop>
            </div>
        </m-pop>
        <m-pop ref="mobile_pop">
            <div class="form-panel">
                <div class="header-ctrl">
                    <a class="pull-left" v-on:click="cancelMobile">取消</a>
                    <a class="center">绑定手机</a>
                    <a class="pull-right" v-on:click="confirmMobile">确定</a>
                </div>
                <div class="m-box">
                    <div class="label">手机号码</div>
                    <div class="content">
                        <input class="input" placeholder="输入手机号码" :value="user_info.mobile">
                    </div>
                </div>
                <div class="m-box valid">
                    <div class="label">验证码</div>
                    <div class="content">
                        <input class="input" placeholder="输入短信验证码" >
                    </div>
                    <a class="send-valid-btn" :class="{sending:is_sending}" v-on:click="sendValidCode">{{send_text}}</a>
                </div>
            </div>
        </m-pop>
        <m-pop ref="pwd_pop">
            <div class="form-panel">
                <div class="header-ctrl">
                    <a class="pull-left" v-on:click="cancelPwd">取消</a>
                    <a class="center">修改密码</a>
                    <a class="pull-right" v-on:click="confirmPwd">确定</a>
                </div>
                <div class="m-box">
                    <div class="label">新密码</div>
                    <div class="content">
                        <input class="input" placeholder="输入新的密码" >
                    </div>
                </div>
                <div class="m-box">
                    <div class="label">确认密码</div>
                    <div class="content">
                        <input class="input" placeholder="再次输入新密码" >
                    </div>
                </div>
                <p class="tips">两次密码必须一致，不可填写旧密码，必须包含数字+字母</p>
            </div>
        </m-pop>
        <m-pop ref="email_pop">
            <div class="form-panel">
                <div class="header-ctrl">
                    <a class="pull-left" v-on:click="cancelEmail">取消</a>
                    <a class="center">绑定邮箱</a>
                    <a class="pull-right" v-on:click="confirmEmail">确定</a>
                </div>
                <div class="m-box">
                    <div class="label">邮箱地址</div>
                    <div class="content">
                        <input class="input" placeholder="输入电子邮箱地址" :value="user_info.email">
                    </div>
                </div>
                <p class="tips">请填写正确邮箱地址，以便接收重要信息！</p>
            </div>
        </m-pop>
        <m-pop ref="nickname_pop">
            <div class="form-panel">
                <div class="header-ctrl">
                    <a class="pull-left" v-on:click="cancelNickname">取消</a>
                    <a class="center">更改昵称</a>
                    <a class="pull-right" v-on:click="confirmNickname">确定</a>
                </div>

                <div class="m-box">
                    <div class="label">昵称</div>
                    <div class="content">
                        <input class="input" placeholder="输入昵称" :value="user_info.nickname">
                    </div>
                </div>
                <p class="tips">评论，消息，好友等将显示修改后的昵称</p>
            </div>
        </m-pop>
    </div>
    </transition>
</template>

<script>
	import picker from 'vue-3d-picker';
	import m_pop from "../common/m_pop.vue"
export default {
    name: 'address_edit',
    data () {
        return {
			show:false,
			sexItems:[{values:['男','女','保密']}],
			temp_sex_text:'',
            send_text:'发送验证码',
            is_sending:false,
            user_info:{}
        }
    },
    created(){
		this.user_info={
			nickname:'masky',
			mobile:'13045860648',
            sex:'男',
            email:'804057895@qq.com'
		};
    },
    methods:{
		back:function ()
		{
			this.$router.back();
		},
		chooseSex:function ()
		{
			this.show=true;
		},
		closeSex:function ()
		{
			this.show=false;
		},
		confirmSex:function ()
		{
			this.user_info.sex=this.temp_sex_text;
			this.show=false;
		},
		onSexChange:function (v)
		{
			this.temp_sex_text =v;
		},
		showMobilePop:function ()
		{
            this.$refs.mobile_pop.show();
		},
		confirmMobile:function ()
		{
            
		},
		cancelMobile:function ()
		{
			this.$refs.mobile_pop.close();
		},
		sendValidCode:function ()
		{
			let self=this;
			if(!self.is_sending){
				let i=60;
				self.is_sending=true;
				let id= setInterval(function ()
									{
										if(i>0){
											i--;
											self.send_text=i+'秒后重试';
										}else{
											self.is_sending=false;
											self.send_text='发送验证码';
											clearInterval(id);
										}
									},1000)
            }

		},
		showEmailPop:function ()
		{
			this.$refs.email_pop.show();
		},
		confirmEmail:function ()
		{

		},
		cancelEmail:function ()
		{
			this.$refs.email_pop.close();
		},
		showNicknamePop:function ()
		{
			this.$refs.nickname_pop.show();
		},
		confirmNickname:function ()
		{

		},
		cancelNickname:function ()
		{
			this.$refs.nickname_pop.close();
		},
		showPwdPop:function ()
		{
			this.$refs.pwd_pop.show();
		},
		confirmPwd:function ()
		{

		},
		cancelPwd:function ()
		{
			this.$refs.pwd_pop.close();
		},
		showAvatarPop:function ()
		{
			this.$refs.avatar_pop.show();
		},
		confirmAvatar:function ()
		{

		},
		cancelAvatar:function ()
		{
			this.$refs.avatar_pop.close();
		},
		showChangeAvatarPop:function ()
		{
			this.$refs.change_avatar_pop.show();
		},
		cancelChangeAvatarPop:function ()
		{
			this.$refs.change_avatar_pop.close();
		},
    },
	components:{
		'picker':picker,
        'm-pop':m_pop
	}
}
</script>

<style scoped>
    .avatar-picker{
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    .avatar-picker img{
        width: 100%;
        border: 1px dotted #999;
    }
    .tips{
        padding: 10px;
        color: #777777;
    }

    .m-box .avatar{
        width: 50px;
        height: 50px;
        margin: 10px;
    }
    .valid .content{
        margin-right: 100px;
    }
    .top-content{
        padding: 10px;
        overflow: hidden;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .top-content a{
        color: #ff4900;
    }
    .send-valid-btn{
        display: block;
        background: #42b983;
        color: #fff;
        margin: 5px;
        border-radius: 3px;
        height: 40px;
        line-height: 40px;
        width: 90px;
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 3px;
        text-align: center;
        font-size: 0.95rem;
    }

    .send-valid-btn.sending{
        background: #bbb;
        color: #eee;
    }
</style>
